<script setup>
import { reactive, ref, useTemplateRef } from "vue";
import data from "./data";

let n1 = 10;
let n2 = ref(10);
let n3 = reactive({ id: 10 });

let o1 = ref([]);
let o2 = reactive([]);

const change = () => {
  /* console.log(n1);
  console.log(n2);
  console.log(n3);

  console.log(o1);
  console.log(o2);
  o1.value = data; */
  // o2 = data; // reactive直接赋值会丢失响应式数据
  o2.push(...data);
};
</script>

<template>
  <div>
    <button @click="change">click</button>
    <!-- <ul>
      <li v-for="v in o1" :key="v.id">{{ v.text }}</li>
    </ul> -->

    <ul>
      <li v-for="v in o2" :key="v.id">{{ v.text }}</li>
    </ul>
  </div>
</template>

<style scoped>
ul,
li {
  padding: 0;
  margin: 0;
}

.tab-tit li {
  padding: 10px 15px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  display: inline-block;
}

.tab-tit .active {
  color: #f60;
  border-bottom: 2px solid #f60;
  background-color: #fae264;
  border-radius: 10px 0;
}

.tab-con div {
  margin: 30px;
}
</style>
